<template>
    <div class="quality">
        <div class="quality_top">
            <img src="../../assets/zszs.png" alt="" @click="slsqBtn(0)">
            <div class="quality_tleft" @click="slsqBtn(0)">按价格选</div>
            <div class="quality_tright" @click="slsqBtn(1)">按对象选</div>
        </div>
        <div class="serchImg" @click="serchClick">
            <img src="../../assets/search1.png">
        </div>
        <yd-slider autoplay="3000">
            <yd-slider-item v-for="(item,index) in objImg" :key="index">
                <a :href="item.advUrl">
                    <img style="min-height:3.8rem" :src="imgUrl+item.advContent">
                </a>
            </yd-slider-item>
        </yd-slider>
        <!-- <div class="slsq_img" @click="slsqBtn"></div> -->
        <yd-tab class="yd_tabs" :callback='tabsCall' active-color='#A8817C'>
            <yd-tab-panel label="珍特优鲜" :active="activeMtyx">
                <div class="quality_ul">
                    <div class="quality_li" v-for="(item,index) in mtyxlist" :key='index' @click="commodity(item.goodsCommonid)">
                        <div class="quality_img">
                            <img :src='imgUrl+item.goodsImage'>
                        </div>
                        <div class="quality_list">
                            <div class="quality_title">{{item.goodsName}}</div>
                            <div class="quality_conter">{{item.goodsJingo}}</div>
                            <div class="quality_money">￥
                                <yd-countup :endnum="item.goodsPrice" duration="0.1" decimals="2" separator=","></yd-countup>
                                <!-- <span v-show="item.scId != 1 && item.goodsPrice != item.goodsMarketprice" style="margin-left:20px;font-size:10px;color:#666;text-decoration:line-through;"> -->
                                <!-- <span v-show="item.goodsPrice != item.goodsMarketprice" style="margin-left:20px;font-size:10px;color:#666;text-decoration:line-through;">
                                    <b>￥</b>
                                    <yd-countup style="font-size:10px;" v-if="item.goodsMarketprice" :endnum="item.goodsMarketprice" duration="0.1" decimals="2" separator=","></yd-countup>
                                    <span v-else>0</span>
                                </span> -->
                            </div>  
                        </div>
                    </div>
                </div>
            </yd-tab-panel>
            <!-- <yd-tab-panel label="精神家园" :active="activeJsjy">
                <div class="quality_ul">
                    <div class="quality_li" v-for="(item,index) in jsjylist" :key='index' @click="commodity(item.goodsCommonid)">
                        <div class="quality_img">
                            <img :src='imgUrl+item.goodsImage'>
                        </div>
                        <div class="quality_list">
                            <div class="quality_title">{{item.goodsName}}</div>
                            <div class="quality_conter">{{item.goodsJingo}}</div>
                            <div class="quality_money">￥
                                <yd-countup :endnum="item.goodsPrice" duration="0.1" decimals="2" separator=","></yd-countup>
                            </div>
                        </div>
                    </div>
                </div>
            </yd-tab-panel> -->
            <!-- <yd-tab-panel label="创意家居" :active="activeCyjj">
                <div class="quality_ul">
                    <div class="quality_li" v-for="(item,index) in cyjjlist" :key='index' @click="commodity(item.goodsCommonid)">
                        <div class="quality_img">
                            <img :src='imgUrl+item.goodsImage'>
                        </div>
                        <div class="quality_list">
                            <div class="quality_title">{{item.goodsName}}</div>
                            <div class="quality_conter">{{item.goodsJingo}}</div>
                            <div class="quality_money">￥
                                <yd-countup :endnum="item.goodsPrice" duration="0.1" decimals="2" separator=","></yd-countup>
                            </div>
                        </div>
                    </div>
                </div>
            </yd-tab-panel> -->
        </yd-tab>
        <yd-button @click.native="lists" size="large" style="margin-top:0.1rem;" type="hollow" color='#FA7471'>更多精选商品</yd-button>
        <!--购物车  -->
        <div class="shopping" @click="shoppingCart">
            <yd-icon name="shopcart-outline" size='0.5rem'></yd-icon>
            <yd-badge class="badge" type="danger" v-if="shoppingNum>0">{{shoppingNum}}</yd-badge>
        </div>
    </div>
</template>

<script>
export default {
    name: 'quality',
    data() {
        return {
            imgUrl: this.CONSTANT.imgBaseUrl,
            shoppingNum: 0,
            quality: 'quality',
            objImg: [],
            jsjylist: [],
            cyjjlist: [],
            mtyxlist: [],
            type: 'mtyx',
            activeMtyx: true,
            activeJsjy: false,
            activeCyjj: false
        }
    },
    created: function() {
        // 当前页面是从易连互动返回的场合
        if (this.$store.state.pageToPage == 'meToLottery') {   
            this.$store.commit('pageToPage', '');         
            this.$router.push('/me');
        }
        this.$store.commit('routerTo', '/');
        // 选中TAB的设定
        // 导航栏的TAB、主页面的图片、商品分项后的页面的回退等处理，跳转到该页面时
        // 从该页面跳转到其他页面（商品详情、更多精选商品），再跳转回来时
        let selectedTab = this.$store.state.selectedTab || '';
        if (selectedTab != undefined && selectedTab != '') {
            this.type = selectedTab;
            if (this.type == 'jsjy') {
                this.activeJsjy = true;
            } else if (this.type == 'cyjj') {
                this.activeCyjj = true;
            } else if (this.type == 'mtyx') {
                this.activeMtyx = true;
            } else {
                // 以上条件以外的场合
                this.activeMtyx = true;
            }
            // 清空已设定的值
            this.$store.commit('selectedTab', '');
        }

        this.init();
        this.shoppingNum = this.$store.state.cartGoodsNum;        
        this.list();
        this.inits(6);
    },
    methods: {
        serchClick() {
            this.$router.push('/qualitylist');
        },
        inits(item) {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'adv/list?apId=' + item)
                .then((response) => {
                    if (response.status == 200) {
                        for (var i = 0; i < response.data.object.length; i++) {
                            var advUrl = response.data.object[i].advUrl;
                            if(advUrl==''){
                                response.data.object[i].advUrl = 'javascript:;'
                            }
                        }
                        this.objImg = response.data.object;
                    }
                })
        },
        //购物车商品数量
        list() {
            this.$axios.get(this.CONSTANT.wapiBaseUrl + 'member/statistics')
                .then((response) => {
                    if (response.status == 200) {
                        this.shoppingNum = response.data.object.cartGoodsNum;
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        init() {
            this.$dialog.loading.open('请稍后');
            this.$axios.post(this.CONSTANT.wapiBaseUrl + 'activeArea/list?pageSize=100&recommendType=' + this.type)
                .then((response) => {
                    this.$dialog.loading.close();
                    if (response.status) {
                        if (this.type == 'jsjy') {
                            this.jsjylist = response.data.object;
                        } else if (this.type == 'cyjj') {
                            this.cyjjlist = response.data.object;
                        } else if (this.type == 'mtyx') {
                            this.mtyxlist = response.data.object;
                        }
                    }
                }).catch((error) => {
                    this.$dialog.loading.close();
                });
        },
        tabsCall(label) {
            if (label == '精神家园') {
                this.type = 'jsjy';
            } else if (label == '创意家居') {
                this.type = 'cyjj';
            } else if (label == '珍特优鲜') {
                this.type = 'mtyx';
            }
            this.init();
        },
        commodity(goodsCommonid) {
            // 跳转到其他页面时，当前的Tab
            this.$store.commit('selectedTab', this.type);
            this.$router.push({
                name: 'commodity', query: { goodsCommonid: goodsCommonid }
            });
        },
        slsqBtn(item) {
            this.$router.push('/gifts?item=' + item);
        },
        lists() {
            // 跳转到其他页面时，当前的Tab
            this.$store.commit('selectedTab', this.type);
            this.$store.state.searchValue = '';
            this.$store.state.startPrice = 0;
            this.$router.push('/qualitylist?type='+this.type);
        },
        shoppingCart() {
            this.$router.push('/shoppingCart');
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.quality {
    margin-bottom: 0.1rem;
}

.serchImg {
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
    width: 0.7rem;
    height: 0.7rem;
    z-index: 99;
}

.serchImg img {
    width: 100%;
    height: 100%;
    display: block;
}

.quality_top {
    width: 100%;
    max-width: 7.5rem;
    height: 1.4rem;
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -3.75rem;
    top: 2.1rem;
    z-index: 9;
}

.quality_top img {
    display: block;
    width: 100%;
}

.quality_top .quality_tleft {
    position: absolute;
    right: 2.4rem;
    top: 0.45rem;
    width: 1.5rem;
    color: #A84043;
    height: 0.5rem;
    font-size: 12px;
    border-radius: 0.4rem;
    background: #fff;
    text-align: center;
    line-height: 0.5rem;
    font-weight: 600;
}

.quality_top .quality_tright {
    position: absolute;
    right: 0.7rem;
    top: 0.45rem;
    width: 1.5rem;
    color: #A84043;
    height: 0.5rem;
    font-size: 12px;
    border-radius: 0.4rem;
    background: #fff;
    text-align: center;
    line-height: 0.5rem;
    font-weight: 600;
}

.quality_ul {
    width: 94%;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
}

.shopping {
    position: fixed;
    right: 5%;
    bottom: 1.5rem;
    width: 1rem;
    z-index: 99;
    text-align: center;
    line-height: 1rem;
    color: #fff;
    font-weight: 400;
    height: 1rem;
    border-radius: 50%;
    background: #F4A9A3;
}

.badge {
    position: absolute;
    right: 0;
    top: -0.1rem;
}

.quality_li {
    width: 100%;
    height: 2rem;
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: hidden;
    border-bottom: 1px solid #BBBBBB;
}

.quality_li:last-of-type {
    border-bottom: 0;
}

.quality_li .quality_img {
    float: left;
    width: 1.8rem;
    height: 100%;
    overflow: hidden;
}

.quality_img img {
    width: 100%;
    height: auto;
    min-height: 100%;
}

.quality_list {
    /* float: left; */
    /* width: calc(100% - 2.5rem); */
    padding-left: 0.2rem;
    height: 100%;
    box-sizing: border-box;
    padding-top: 0.3rem;
    overflow: hidden;
}

.quality_list .quality_title {
    color: #333;
    font-size: 16px;
    overflow: hidden;
    height: 0.4rem;
    line-height: 0.4rem;
}

.quality_list .quality_conter {
    color: #4E4B4A;
    height: 0.5rem;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 0.5rem;
}

.quality_list .quality_money {
    color: #C1192C;
    font-size: 14px;
    line-height: 0.5rem;
}

.quality_money span {
    font-size: 18px;
}

.yd_items {
    height: 2.6rem;
}

.yd_items img {
    height: auto;
    min-height: 2.6rem;
}

.yd_tabs {
    position: relative;
    background: #fff;
}
</style>
<style>
.yd-slider-item {
    background: #fcfcfc;
}

.quality .yd-slider {
    overflow: hidden;
    height: 3.8rem;
}

.quality .yd-slider img {
    min-height: 3.8rem;
}

.quality .yd-tab-nav:after {
    border-bottom: 0;
}

.quality .yd-tab-panel {
    font-size: 14px;
}
</style>